import React, { useEffect, useState, useRef } from 'react'
import { Modal, Layout, Image, Space, message, Table, Tag, Input } from 'antd';
import { CheckCircleTwoTone, CloseCircleTwoTone } from '@ant-design/icons';
import { Routes, Route, useNavigate, Navigate } from 'react-router-dom'
import axios from 'axios';
import moment from 'moment'
import MySpan from '../../../components/MySpan'
import 'moment/locale/zh-cn';
const { TextArea } = Input;
const { confirm } = Modal;
export default function Index() {
    const navigate = useNavigate()
    const [originData, setOriginData] = useState(0);
    const { Content, } = Layout;
    const rejectmsg = useRef();
    useEffect(() => {
        message.destroy();
        axios.get("http://localhost:8080/qryAllOrgApply").then(resp => {
            console.log('resp的内容:', resp);
            setOriginData(resp.data.data)
        }).catch(err => {
            console.log(err);
            message.error("请求失败!", 1)
        })
        return () => {
            //销毁组件时
            console.log('menu-destroy');
        };
    }, []);

    const columns = [
        {
            title: '机构名',
            dataIndex: 'orgname',
            key: 'orgname',
            render:(text, record)=>(
                <MySpan title={record.orgname}/>
            )
        },
        {
            title: '邮箱',
            dataIndex: 'orgemail',
            key: 'orgemail',
            render:(text, record)=>(
                <MySpan title={record.orgemail}/>
            )

        },
        {
            title: '证明材料',
            key: 'photo',
            render: (text, record) => (
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', }}>
                    <Image
                        width={100}
                        height={100}
                        src={`http://localhost:8080/getOrgApplyPhoto?orgid=${record.orgid}`}
                    />
                </div>
            ),
        },
        {
            title: '申请日期',
            key: 'createtime',
            dataIndex: 'createtime',
            sorter: (a, b) => Number(a.createtime) - Number(b.createtime),
            render: (text, record) => (
                <MySpan title={moment(Number(record.createtime)).format('YYYY-MM-DD HH:mm:ss')}/>
            ),
        },
        {
            title: '状态',
            key: 'applystate',
            filters: [
                {
                    text: '待审批',
                    value: 0,
                },
                {
                    text: '已通过',
                    value: 1,
                },
                {
                    text: '已拒绝',
                    value: 2,
                }
            ],
            render: (text, record) => (
                <Space size="middle">
                    {

                        record.applystate == 0 ?
                            <Tag color="lime">等待审批</Tag> :
                            record.applystate == 1 ?
                                <Tag color="green">已同意</Tag> :
                                // <Tag color="#f50">已拒绝,{record.rejectmsg}</Tag>
                                <Tag color="#f50">已拒绝</Tag>
                    }
                </Space>
            ),
            onFilter: (value, record) => record.applystate === value,
        },
        {
            title: 'Action',
            key: 'action',
            render: (text, record) => (
                <Space size="middle" key="useraction">
                    {
                        record.applystate == "0" ?
                            <>
                                <a onClick={() => { agreeModal(record) }}><CheckCircleTwoTone twoToneColor="#00ff00" /></a>
                                <a onClick={() => { rejectModal(record) }}><CloseCircleTwoTone twoToneColor="#eb2f96" /></a>
                            </> : <></>
                    }
                </Space >

            ),
        },
    ];
    const agreeModal = (record) => {
        Modal.confirm({
            title: '确认',
            content: (
                <div>
                    <p>同意机构申请?</p>
                    <p>确认后将发送邮件至申请者邮箱</p>
                </div>
            ),
            onOk() {
                console.log(record);
                axios.post("http://localhost:8080/agreeOrgApply" ,record).then(resp => {
                    console.log(resp);
                    if (resp.data.state == "0") {
                        message.success(resp.data.message, 1);
                        setTimeout(() => {
                            window.location.reload()
                        }, 800);
                    } else {
                        message.error(resp.data.message, 1);
                    }
                }).catch(err => {
                    message.error("网络异常!", 1);
                })
            },
        });
    }

    const rejectModal = (record) => {
        Modal.confirm({
            title: '请输入拒绝理由',
            content: (
                <div>
                    <TextArea ref={rejectmsg} />
                </div>
            ),
            onOk() {
                const rejectMessage = rejectmsg.current.resizableTextArea.textArea.value
                const params = { orgid: record.orgid, rejectMessage: rejectMessage,orgemail:record.orgemail }

                axios.post("http://localhost:8080/rejectOrgApply", params).then(resp => {
                    console.log(resp);
                    if (resp.data.state == "0") {
                        message.success(resp.data.message, 1);
                        setTimeout(() => {
                            window.location.reload()
                        }, 800);
                    } else {
                        message.error(resp.data.message, 1);
                    }
                }).catch(err => {
                    message.error("网络异常!", 1);
                })

            },
        });

    }
    return (

        <Table columns={columns} dataSource={originData} className="animate__animated animate__fadeIn"/>
    )

}
